import { createComponent } from "./create-component"

export const TagAnatomy = createComponent((props) => {
  const { palette, ...rest } = props
  return (
    <svg
      width={400}
      height={300}
      viewBox="0 0 400 300"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...rest}
    >
      <rect x={90} y={128} width={220} height={44} rx={22} fill={palette[3]} />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M108 150C108 147.515 110.015 145.5 112.5 145.5H223.5C225.985 145.5 228 147.515 228 150C228 152.485 225.985 154.5 223.5 154.5H112.5C110.015 154.5 108 152.485 108 150Z"
        fill={palette[2]}
      />
      <path
        d="M278.255 155.506C278.091 155.67 277.999 155.893 277.999 156.125C277.999 156.357 278.091 156.579 278.255 156.743C278.419 156.907 278.642 157 278.874 157C279.106 157 279.329 156.907 279.493 156.743L284.896 151.341C284.909 151.327 284.925 151.317 284.943 151.309C284.961 151.302 284.98 151.298 284.999 151.298C285.018 151.298 285.037 151.302 285.055 151.309C285.073 151.317 285.089 151.327 285.102 151.341L290.505 156.744C290.586 156.826 290.683 156.89 290.789 156.934C290.895 156.978 291.009 157.001 291.124 157.001C291.239 157.001 291.352 156.978 291.459 156.934C291.565 156.89 291.661 156.826 291.743 156.745C291.824 156.663 291.888 156.567 291.932 156.461C291.976 156.355 291.999 156.241 291.999 156.126C291.999 156.011 291.976 155.897 291.932 155.791C291.889 155.685 291.824 155.588 291.743 155.507L286.341 150.102C286.327 150.089 286.316 150.073 286.309 150.055C286.302 150.037 286.298 150.018 286.298 149.999C286.298 149.98 286.302 149.961 286.309 149.943C286.316 149.926 286.327 149.91 286.341 149.896L291.744 144.493C291.908 144.329 292 144.106 292 143.874C292 143.642 291.907 143.419 291.743 143.255C291.579 143.091 291.356 142.999 291.124 142.999C290.892 142.999 290.669 143.092 290.505 143.256L285.102 148.658C285.089 148.671 285.073 148.682 285.055 148.689C285.037 148.697 285.018 148.7 284.999 148.7C284.98 148.7 284.961 148.697 284.943 148.689C284.925 148.682 284.909 148.671 284.896 148.658L279.493 143.256C279.412 143.175 279.315 143.11 279.209 143.066C279.103 143.022 278.989 142.999 278.874 142.999C278.642 142.999 278.419 143.092 278.255 143.256C278.091 143.42 277.999 143.642 277.999 143.874C277.999 144.106 278.091 144.329 278.255 144.493L283.657 149.896C283.671 149.91 283.682 149.926 283.689 149.943C283.696 149.961 283.7 149.98 283.7 149.999C283.7 150.018 283.696 150.037 283.689 150.055C283.682 150.073 283.671 150.089 283.657 150.102L278.255 155.506Z"
        fill={palette[15]}
      />
    </svg>
  )
})
